<template>
    <div id="max">
        <div id="top">
            <el-button text @click="open1()">
                <el-button type="primary">新增接触方式</el-button>
            </el-button>
        </div>
        <div id="mid">
            <el-table :data="table.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%">
                <el-table-column type="index" label="序号" style="width: 10%" align="center" />
                <el-table-column prop="contactMode" label="接触方式名称" style="width: 22.5%" align="center" />
                <el-table-column prop="creator" label="创建人" style="width: 22.5%" align="center" />
                <el-table-column prop="createDate" label="创建日期" style="width: 22.5%" align="center" />
                <el-table-column label="操作" style="width: 22.5%" align="center">
                    <template #default>
                        <el-button text @click="dialogVisible2 = true">
                            <el-button link type="primary" size="small" @click="open2()">编辑</el-button>
                        </el-button>
                        <el-button text @click="dialogVisible3 = true">
                            <el-button link type="primary" size="small" @click="open3()">删除</el-button>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="bottom">
            <div id="fenye" class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="table.length" @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1" />
        </div>
        </div>
    </div>
    <!-- 模态框1 -->
    <el-dialog v-model="dialogVisible1" title="新增接触方式" width="30%" :before-close="handleClose1">
        <div id="mo1">
            <p>
                接触方式名称
            </p>
            <el-input v-model="input1" placeholder="请输入" />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取消</el-button>
                <el-button type="primary" @click="add()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 模态框2 -->
    <el-dialog v-model="dialogVisible2" title="编辑接触方式" width="30%" :before-close="handleClose2">
        <div id="mo1">
            <p>接触方式名称</p>
            <el-input v-model="input2" placeholder="请输入" />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取消</el-button>
                <el-button type="primary" @click="edit()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 模态框3 -->
    <el-dialog v-model="dialogVisible3" title="确认删除" width="30%" :before-close="handleClose3">
        <span>该数据删除后不能恢复，是否确认删除？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取消</el-button>
                <el-button type="primary" @click="del()">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive, toRefs } from 'vue';
import axios from '@/util/http';
import { ElMessageBox } from 'element-plus'


export default defineComponent({
    name: "jiechu",
    setup() {
        // const tableData = [
        //     {
        //         xuhao: '1',
        //         jiechufangshi:'身体接触',
        //         name: '系统',
        //         time: '2020-11-15',
        //     },
        //     {
        //         xuhao: '2',
        //         jiechufangshi:'空气接触',
        //         name: '张三',
        //         time: '2020-11-16',
        //     },
        //     {
        //         xuhao: '3',
        //         jiechufangshi:'远程接触',
        //         name: '李四',
        //         time: '2020-11-17',
        //     },
        //     {
        //         xuhao: '4',
        //         jiechufangshi:'身体接触',
        //         name: '王五',
        //         time: '2020-11-18',
        //     },
        // ];

        const dialogVisible1 = ref(false);//新增模态框
        const dialogVisible2 = ref(false);//编辑模态框
        const dialogVisible3 = ref(false);//删除模态框

        const handleClose1 = (done: () => void) => {
            ElMessageBox.confirm('确认关闭？')
                .then(() => {
                    done()
                })
                .catch(() => {
                    // catch error
                })
        };
        const handleClose2 = (done: () => void) => {
            ElMessageBox.confirm('确认关闭？')
                .then(() => {
                    done()
                })
                .catch(() => {
                    // catch error
                })
        };
        const handleClose3 = (done: () => void) => {
            ElMessageBox.confirm('确认关闭？')
                .then(() => {
                    done()
                })
                .catch(() => {
                    // catch error
                })
        }
        const input1 = ref('')//新增接触方式
        const input2 = ref('')//编辑接触方式

        const each:any = reactive({
            id:''
        })
        let data:any=reactive([])
        //数据渲染
        //数据拿取
        let Table = reactive({
            table: []
        })
        onMounted(() => {
            axios({
                method: 'get', url: '/dataDictionary/contactMod/queryAllContactModesByPage', params: {
                    currentPage: 1,
                    pageSize: 1000
                }
            }).then((res) => {
                // console.log("成功");
                // console.log(res.data.data);
                Table.table = res.data.data
                res.data.data.forEach((itme)=>{
                    each.id=itme.id
                    data.push(JSON.parse(JSON.stringify(each)))
                 })
                // console.log("======")
                // console.log(store.getters.zhanghao)
                console.log(data);
                // console.log(Table.table);
                // Table.table.forEach(element => {
                //     element.createDate
                // });
            })
        })

        //打开新增转运方式模态框
        function open1() {
            dialogVisible1.value = true
        }
        //新增转运方式
        function add() {
            axios({
                method: 'post',
                url: '/dataDictionary/contactMod/addContactMode',
                data: {
                    contactMode: input1.value,
                    createDate: "2023-02-27T08:55:28.582Z",
                    creator: localStorage.userName,
                }
            }).then((res) => {
                console.log('新增成功');
                dialogVisible1.value = false
            })
        }

        //打开编辑转运方式模态框
        function open2() {
            dialogVisible2.value = true
        }
        //编辑
        function edit() {
            axios({
                method: 'post',
                url: '/dataDictionary/contactMod/updateContactMode',
                data: {
                    contactMode: input2.value,
                    createDate: "2023-02-27T08:57:54.205Z",
                    creator: localStorage.userName,
                    id: data.id
                }
            }).then((res) => {
                console.log('修改成功');
                dialogVisible2.value = false
            })
        }

        //打开删除转运方式模态框
        function open3() {
            dialogVisible3.value = true
        }
        //删除数据
        function del() {
            axios({
                method: 'post',
                url: '/dataDictionary/contactMod/deleteContactMode',
                params: {
                    id:data.id
                }
            }).then((res) => {
                alert('删除成功');
                dialogVisible3.value = false
            })
        }

        const currentPage = ref(1)
        const pageSize = ref(10)
        const small = ref(false)
        const background = ref(false)
        const disabled = ref(false)
        const handleSizeChange1 = (val: number) => {
            console.log(`${val} items per page`)
        }
        const handleCurrentChange1 = (val: number) => {
            console.log(`current page: ${val}`)
        }
        return {
            // tableData,
            dialogVisible1,//新增模态框
            dialogVisible2,//编辑模态框
            dialogVisible3,//删除模态框
            handleClose1,//新增模态框关闭询问
            handleClose2,//编辑模态框关闭询问
            handleClose3,//删除模态框关闭询问
            input1,//新增输入 
            input2,//编辑输入
            Table,//数据
            ...toRefs(Table),//将vue3对象展开成为普通对象
            open1,//打开新增模态框
            open2,//打开编辑模态框
            open3,//打开删除模态框
            add,//新增转运方式
            edit,//编辑数据
            del,//删除数据
            each,
            data,
            currentPage,
            pageSize,
            small,
            background,
            disabled,
            handleSizeChange1,
            handleCurrentChange1,
        }
    }
})


</script>

<style scoped>
#max {
    background-color: white;
    font-size: 13px;
    color: #333;
}

#top {
    padding: 20px;

}

#top>button {
    height: 40px;
    width: 146px;
}

#mid {
    padding: 20px;
}

#bottom {
    display: flex;
    justify-content: end;
    padding: 20px
}

.example-pagination-block+.example-pagination-block {
    margin-top: 10px;
}

.example-pagination-block .example-demonstration {
    margin-bottom: 16px;
}

#mo1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

#mo1>p {
    padding-right: 30px;
}

/deep/ .el-input {
    width: 240px;
}
#fenye {
    padding: 10px 35px;
    display: flex;
    justify-content: end;
    background-color: white;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>